<template>
	<el-button :type="componentModel.colorType" size="mini" :style="componentModel.cssStyle"
		:class="{'highlight-button':componentModel.highlight}" @click="onClickHandler" v-show="visible">{{componentModel.label}}
		<el-dialog v-model="dialogVisible" :append-to-body="true">
			<component :is="tempClientPageCode" :currentId="currentId" :model="componentModel.model" :para1="componentModel.para1"
			:para2="componentModel.para2"  @closeDialogEvent="onDialogCloseHandler" ref="dynamicComponent">
			</component>
		</el-dialog>
	</el-button>
</template>

<script>
	import {
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	import {
		getPageData
	} from '@/utils/pageUtils.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "ButtonComponent",
		props: ["componentModel", "highlight", "actionScope"],
		data() {
			return {
				visible: true,
				label: "",
				tempClientPageCode: undefined,
				dialogVisible: false,
				currentId: undefined,
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			onClickHandler() {
				if (this.componentModel.confirmMessage != undefined) {
					this.$confirm(this.componentModel.confirmMessage, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.processClick();
					}).catch(() => {

					});
				} else {
					this.processClick();
				}
			},
			processClick() {
				if (this.componentModel.clientPageCode != undefined) {
					this.tempClientPageCode = this.componentModel.clientPageCode;
					this.dialogVisible = true;
					this.$nextTick(function(){
						this.$refs.dynamicComponent.init();
					});
					return;
				}else if (this.componentModel.serverPageCode != undefined) {
					this.tempClientPageCode = "my-page-component";
					this.dialogVisible = true;
					this.$nextTick(function(){
						this.$refs.dynamicComponent.navigatePage(this.componentModel.serverPageCode,{},true);
					});
					return;
				}
				if (this.actionScope != undefined) {
					this.$emit('click');
					return;
				}
				sendComponentEventRequest(this, "clickEvent", {});
			},
			setProp(prop) {
				for (var k in prop) {
					if (k == "visible") {
						this.visible = prop[k];
					} else if (k == "label") {
						this.label = prop[k];
					} else if (k == "currentId") {
						this.currentId = prop[k];
					}
				}
			},
			onDialogCloseHandler() {
				this.dialogVisible = false;
			},onParaCallback(){
				var data=getPageData(this.$refs.dynamicComponent,this.children);
				this.dialogVisible = false;
				var newData={};
				for(var k in data){
					newData[this.componentModel.id+"_"+k]=data[k];
				}
				sendComponentEventRequest(this, "clickEvent", newData);
			}
		},
	}
</script>

<style>

</style>
